<template>
  <div>
    <el-card class="detail-card">
      <div slot="header" class="detail-header">
        <div class="header-left">
          <el-button icon="el-icon-back" @click="onBack">返回</el-button>
          <span class="path-name">{{ record.path_name }}</span>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="onContinue">继续学习</el-button>
        </div>
      </div>

      <div class="detail-content">
        <div class="progress-overview">
          <div class="progress-item">
            <div class="progress-value">{{ record.progress }}%</div>
            <div class="progress-label">学习进度</div>
          </div>
          <div class="progress-item">
            <div class="progress-value">{{ record.study_time }}</div>
            <div class="progress-label">学习时长(小时)</div>
          </div>
          <div class="progress-item">
            <div class="progress-value">{{ record.completed_nodes }}/{{ record.total_nodes }}</div>
            <div class="progress-label">已完成知识点</div>
          </div>
        </div>

        <div class="node-list">
          <div class="list-header">
            <span class="title">知识点列表</span>
            <el-input
                v-model="searchKeyword"
                placeholder="搜索知识点"
                prefix-icon="el-icon-search"
                clearable
                style="width: 200px"
            />
          </div>
          <el-table
              :data="filteredNodes"
              style="width: 100%"
              :row-class-name="getRowClassName"
          >
            <el-table-column type="index" width="50" label="序号"/>
            <el-table-column prop="name" label="知识点名称" min-width="200">
              <template slot-scope="scope">
                <div class="node-name">
                  <i :class="getNodeTypeIcon(scope.row.type)"></i>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100">
              <template slot-scope="scope">
                {{ getNodeTypeName(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusName(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="study_time" label="学习时长" width="120">
              <template slot-scope="scope">
                {{ scope.row.study_time }}小时
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="small"
                    @click="onStudy(scope.row)"
                    :disabled="scope.row.status === 2"
                >
                  {{ scope.row.status === 0 ? '开始学习' : '继续学习' }}
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    @click="onView(scope.row)"
                >
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { http } from "@/api";

export default {
  name: "LearningRecordDetail",
  data() {
    return {
      record: {
        id: null,
        path_name: '',
        progress: 0,
        study_time: 0,
        completed_nodes: 0,
        total_nodes: 0
      },
      nodes: [],
      searchKeyword: '',
      loading: false
    }
  },
  computed: {
    filteredNodes() {
      if (!this.searchKeyword) {
        return this.nodes
      }
      const keyword = this.searchKeyword.toLowerCase()
      return this.nodes.filter(node => 
        node.name.toLowerCase().includes(keyword)
      )
    }
  },
  created() {
    this.getRecordDetail()
  },
  methods: {
    getRecordDetail() {
      this.loading = true
      http.learning.getDetail(this.$route.params.id).then(res => {
        this.record = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    getNodeTypeIcon(type) {
      const icons = {
        1: 'el-icon-collection',
        2: 'el-icon-notebook-2',
        3: 'el-icon-data-analysis',
        4: 'el-icon-guide',
        5: 'el-icon-cpu',
        6: 'el-icon-connection'
      }
      return icons[type] || 'el-icon-document'
    },
    getNodeTypeName(type) {
      const types = {
        1: '概念',
        2: '定理',
        3: '公式',
        4: '规则',
        5: '设备',
        6: '技术'
      }
      return types[type] || '-'
    },
    getStatusType(status) {
      const types = {
        0: 'info',
        1: 'warning',
        2: 'success'
      }
      return types[status] || 'info'
    },
    getStatusName(status) {
      const names = {
        0: '未开始',
        1: '学习中',
        2: '已完成'
      }
      return names[status] || '-'
    },
    getRowClassName({ row }) {
      if (row.status === 2) {
        return 'completed-row'
      }
      return ''
    },
    onBack() {
      this.$router.push('/learning/record')
    },
    onContinue() {
      // TODO: 跳转到学习页面
      this.$message.info('继续学习功能开发中')
    },
    onStudy(row) {
      // TODO: 跳转到知识点学习页面
      this.$message.info('知识点学习功能开发中')
    },
    onView(row) {
      // TODO: 跳转到知识点详情页面
      this.$message.info('知识点详情功能开发中')
    },
    saveLearningRecord(nodeId, studyTime) {
      const data = {
        userId: this.$store.state.user.id,
        nodeId,
        studyTime,
        status: 1
      }
      http.learning.save(data).then(() => {
        this.getRecordDetail()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail-card {
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      display: flex;
      align-items: center;
      .path-name {
        margin-left: 16px;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
  .detail-content {
    .progress-overview {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      padding: 20px;
      background: #f5f7fa;
      border-radius: 8px;
      .progress-item {
        text-align: center;
        .progress-value {
          font-size: 24px;
          font-weight: bold;
          color: #409EFF;
          margin-bottom: 8px;
        }
        .progress-label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
    .node-list {
      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }
      .node-name {
        display: flex;
        align-items: center;
        i {
          margin-right: 8px;
          font-size: 16px;
          color: #909399;
        }
      }
    }
  }
}
.completed-row {
  background-color: #f0f9eb;
}
</style> 